<template>
  <div style="height: 100vh">
    <!-- <VueBetterScroll
      ref="scroll"
      :pullDownRefresh="pullDownRefreshObj"
      :options="options"
    > -->
    <Container>
      <Unlogin v-if="pageState === 0" />
      <Uploading v-else-if="pageState === 1" />
      <UploadEnd v-else-if="pageState === 2" />
      <Uploaded v-else-if="pageState === 3" />
      <Prize v-else-if="pageState === 4" />
    </Container>
    <!-- </VueBetterScroll> -->

    <!-- 每日中奖名单 -->
    <van-popup
      v-model="modalStatus.isPrizeTab"
      position="bottom"
      :style="{ height: '55vh', background: 'transparent', overflow: 'hidden' }"
    >
      <div class="magic_line"></div>
      <PrizeTab />
    </van-popup>

    <!-- 好友助力成功 modal -->
    <van-overlay :show="modalStatus.isHelpSuc && isShowHelpModal">
      <div class="help_modal">
        <p class="lg_title">好友成功为您助力</p>
        <p class="sm_title">
          您获得{{ timeFormat(memberDetail.prizeDate, "YYYY-MM-DD") }}开奖机会
        </p>
        <img :src="img6" alt="" class="help_img" />
        <div class="help_ok" @click="closeHelpModal">
          好的
        </div>
        <img :src="close01" alt="" class="help_close" @click="closeHelpModal" />
      </div>
    </van-overlay>

    <!-- 活动规则 -->
    <van-overlay :show="modalStatus.isActRule" :lock-scroll="false">
      <div class="rule_container">
        <p class="lg_title">活动规则</p>
        <div class="rule_content">{{ ruleContent }}</div>
      </div>
      <div class="rule_close--btn">
        <img :src="close01" alt="" class="help_close" @click="closeActRule" />
      </div>
    </van-overlay>

    <!-- 时间选择弹框 -->
    <van-popup v-model="modalStatus.showTimePicker" round position="bottom">
      <van-datetime-picker
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        :value="currentDate"
        title="请选择乘坐时间"
        type="date"
        @cancel="closeTimePicker"
        @confirm="confirmTime"
      />
    </van-popup>

    <!-- 项目选择弹框 -->
    <van-popup v-model="modalStatus.showProgramPicker" round position="bottom">
      <van-picker
        title="请选择乘坐项目(限巴士管家下单)"
        :columns="columns"
        show-toolbar
        @cancel="closePicker"
        @confirm="confirmCity"
      />
    </van-popup>

    <!-- 全局loading -->
    <van-popup
      class="loading_con"
      v-model="modalStatus.showLoading"
      :close-on-click-overlay="false"
    >
      <!-- <img
        class="loading"
        src="http://zhuanti.chebada.com/zhuanti/common/img/loadingArc.png"
        alt=""
      /> -->
      <van-loading size="50" />
    </van-popup>
  </div>
</template>

<script>
import { Popup, Overlay, DatetimePicker, Picker, Loading } from "vant";
// import VueBetterScroll from "vue2-better-scroll";

import Container from "@/components/container";
import PrizeTab from "@/components/prizeTab";
import Prize from "./prize";
import Unlogin from "./unlogin";
import Uploaded from "./uploaded";
import UploadEnd from "./uploadEnd";
import Uploading from "./uploading";

import {
  convertImgToBase64,
  timeFormat,
  appShareOnRightBtn,
  envFunc,
  shareInwx,
  loadImg
} from "@/utils/util";
import { img6, close01, share, shareWx, shareIndex } from "@/constant";
import dayjs from "dayjs";
import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
dayjs.extend(isSameOrAfter);
dayjs.extend(isSameOrBefore);

export default {
  components: {
    Container,
    Unlogin,
    Uploaded,
    UploadEnd,
    Uploading,
    Prize,
    PrizeTab,
    // VueBetterScroll,
    [Popup.name]: Popup,
    [Overlay.name]: Overlay,
    [DatetimePicker.name]: DatetimePicker,
    [Picker.name]: Picker,
    [Loading.name]: Loading
  },
  data: function() {
    return {
      img6,
      close01,
      share,
      imgUrl: "",
      minDate: new Date(2015, 6, 18),
      maxDate: new Date(),
      currentDate: new Date(),
      shareIndex,

      columns: [
        "汽车票",
        "火车票",
        "机票",
        "城际快线",
        "城际拼车",
        "包车",
        "打车",
        "定制公交",
        "校园巴士",
        "顺风车",
        "景区直通车"
      ],
      pullDownRefreshObj: {
        threshold: 50,
        stop: 40
      },
      options: {
        useTransition: false
      }
    };
  },
  methods: {
    timeFormat(time, format) {
      return timeFormat(time, format);
    },

    confirmCity(e) {
      this.$store.commit("changeProject", e);
      this.closePicker();
    },

    confirmTime(e) {
      this.$store.commit("changeDptDate", timeFormat(e, "YYYY-MM-DD"));
      this.closeTimePicker();
    },

    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return Number(val) + "月";
      }
      if (type === "day") {
        return Number(val) + "日";
      }
      return val;
    },

    closeTimePicker() {
      this.$store.commit("changeTimePicker", false);
    },

    closePicker() {
      this.$store.commit("changeProgramPicker", false);
    },

    closeHelpModal() {
      this.$store.commit("changeHelpSuc", false);
    },
    closeActRule() {
      this.$store.commit("changeActRule", false);
    }
  },
  computed: {
    mainPage() {
      return this.$store.state.mainPage;
    },
    app() {
      return this.$store.state.app;
    },
    modalStatus() {
      return this.$store.state.modalStatus;
    },
    pageState() {
      const { isLogin } = this.app;
      console.log(isLogin, "index 组件");

      const { recordIdIsValid } = this;
      const {
        serviceTime = new Date(),
        drawEndDate,
        memberDetail: { getState = "" }
      } = this.mainPage;

      // 1. 没有登录 0
      // 2. 没有上传凭证
      // 2.1. 可以上传 1
      // 2.2. 不可以上传 2
      // 3.已上传
      // 3.1. 等待开奖 3
      // 3.2. 中奖页面

      return 3;

      // 没有登录直接登录
      if (!isLogin) return 0;
      // 抽奖时间结束之前
      // 是否可以上传 1
      // 是否中奖页面 4
      // 是否等待开奖 3
      else if (dayjs(serviceTime).isSameOrBefore(drawEndDate, "day")) {
        // serviceTime 不等于抽奖最后一天 record == 0 或不存在
        if (!dayjs(serviceTime).isSame(drawEndDate, "day") && !recordIdIsValid)
          return 1;

        // 最后一天不能 上传
        if (dayjs(serviceTime).isSame(drawEndDate, "day") && !recordIdIsValid)
          return 2;

        // 是否等待开奖 有recordId
        if (recordIdIsValid) {
          if (getState == "0") return 3;
          if (getState == "1") return 4;
        }
      }

      // 抽奖时间之后
      else if (dayjs(serviceTime).isAfter(drawEndDate)) {
        if (!recordIdIsValid) return 2;
        else return 4;
      }

      return "";
    },
    recordIdIsValid() {
      const { recordId } = this.mainPage;
      return recordId && recordId !== "0";
    },
    memberDetail() {
      return this.mainPage.memberDetail || {};
    },
    // 是否助力成功弹框
    isShowHelpModal() {
      const { wayType = "" } = this.memberDetail;
      let currentDate = timeFormat(new Date(), "YYYY-MM-DD");
      let cache = localStorage.getItem(currentDate);
      if (!cache && wayType == "2") {
        localStorage.setItem(currentDate, "done");
      }
      return !cache && wayType == "2";
    },
    ruleContent() {
      return this.app.ruleContent;
    }
  },
  created() {
    bridge.naviPlugins.setNaviTitle({
      title: "全网车票 我来报销",
      navigationStyle: "white",
      backKeyCallback: function() {
        bridge.naviPlugins.closePage();
      }
    });
  },

  async mounted() {
    let url = `${location.origin}${
      location.pathname
    }/#/?isskey=1&acte=sharecard&v=${new Date().getTime()}`;

    // 首页接口
    let img = await loadImg(shareIndex);
    let imgUrl = convertImgToBase64(img);

    let params = {
      title: "不限购票平台! 不限时间地点! 不限出行项目!",
      shareImg: shareWx,
      path: `pages/web/web?url=${encodeURIComponent(url)}&isSocket=true`,
      shareUrl: url,
      imgUrl
    };

    envFunc(
      () => {
        appShareOnRightBtn(params);
      },
      () => {
        shareInwx({
          shareUrl: url,
          title: "不限购票平台! 不限时间地点! 不限出行项目!",
          imageUrl: shareWx
        });
      }
    );
  },
  provide: function() {
    return {
      pageState: this.pageState
    };
  }
};
</script>

<style lang="scss" scoped>
@import "@/app.scss";

.magic_line {
  height: 21px;
  border-radius: 30px 30px 0 0;

  background: #f9fafc;
}
.help_modal {
  width: 575px;
  min-height: 650px;
  background: #ffffff;
  border-radius: 30px;

  position: relative;
  @include flex_config(space-between, center, column);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);

  .lg_title {
    font-size: 42px;
    margin-top: 70px;
    font-weight: bold;
    color: #323232;
  }
  .sm_title {
    font-size: 30px;
    // margin-top: 20px;
    font-weight: 400;
    color: #666666;
  }
  .help_img {
    width: 250px;
  }
  .help_ok {
    width: 312px;
    height: 87px;
    line-height: 87px;
    text-align: center;
    background: linear-gradient(90deg, #fd6444, #f8432e);
    border-radius: 55px;
    font-size: 35px;

    font-weight: bold;
    color: #ffffff;
    margin-bottom: 50px;
  }

  .help_close {
    position: absolute;
    bottom: -100px;
    width: 72px;
    left: 50%;
    transform: translate(-50%, 0);
  }
}

.rule_container {
  color: #fff;
  font-size: 29px;
  text-align: center;
  padding-top: 60px;
  height: 70vh;
  overflow: auto;

  .rule_content {
    text-align: left;
    font-size: 24px;
    line-height: 40px;
    font-weight: 400;
    padding: 0 24px;
    white-space: pre-line;
  }
}

.help_close {
  width: 72px;
  margin: 0 auto;
  // left: 50%;
  // transform: translate(-50%, 0);
}

.rule_close--btn {
  text-align: center;
  margin-top: 50px;

  .help_close {
    width: 72px;
    margin: 0 auto;
  }
}

.share_con {
  font-size: 30px;
  padding-top: 30px;
  @include flex_config(space-around, center, row);
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading {
  animation: rotate 0.5s infinite linear;
}

.loading_con {
  background-color: transparent;
}

#copyImg {
  display: none;
}
</style>
